<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CCLUB在线笔试</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.bootcss.com/vue/2.6.8/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <style>
        *{
            margin:0 0px;
            padding: 0 0px;
        }
        .el-form{
            width:1340px;
            border:1px solid #d8dadb;
            margin-top:20px;
            margin-left:90px;
        }
        .el-radio_button{
            background-color:#5272ff;
            border:1px solid #ececed;
            font-size:12px;
            width:67px;
            height:32px;
            padding:8px 13px 8px 13px;
        }
        .el-question_button{
            background-color:#fff;
            border:1px solid #ececed;
            font-size:12px;
            width:67px;
            height:32px;
            padding:8px 13px 8px 13px;
        }
    </style>
</head>
<body>
<div id="app">
    <div style="width:100%;height:50px;background-color:#f2f5ff;">
        <div style="margin-left:90px;padding-top:15px;">后端研发</div>
    </div>
    <div>
        <div style="margin-left:90px;margin-top:15px;">
            <span><a href="javascript:void(0);" @click="" style="text-decoration:none;color:#3e444c;"><- 返回</a></span>
            <span style="color:#ececed;margin-left:15px;">|</span>
            <span style="margin-left:15px;">添加题目</span>
        </div>
    </div>
    <div class="el-form" :style="{'height':(first||second)?(height+'px'):'480px'}">
        <div style="margin-top:15px;">
            <div style="float:left;font-size:12px;margin-left:130px;margin-top:10px;">
                题型
            </div>
            <div style="float:left;margin-left:50px;margin-top:5px;">
                <span :class="first?'el-radio_button':'el-question_button'" style="border:1px solid #ececed;border-radius:6px 0 0 6px;">
                    <a href="javascript:void(0);" @click="switchFirst" :style="{'color':first?'#fff':'#000'}" style="text-decoration:none;">单选题</a>
                </span>
                <span :class="second?'el-radio_button':'el-question_button'" style="margin-left:-5px;">
                    <a href="javascript:void(0);" @click="switchSecond" :style="{'color':second?'#fff':'#000'}" style="text-decoration:none;">多选题</a>
                </span>
                <span :class="third?'el-radio_button':'el-question_button'" style="margin-left:-5px;">
                    <a href="javascript:void(0);" @click="switchThird" :style="{'color':third?'#fff':'#000'}" style="text-decoration:none;">判断题</a>
                </span>
                <span :class="fourth?'el-radio_button':'el-question_button'" style="margin-left:-5px;">
                    <a href="javascript:void(0);" @click="switchFourth" :style="{'color':fourth?'#fff':'#000'}" style="text-decoration:none;">填空题</a>
                </span>
                <span :class="fifth?'el-radio_button':'el-question_button'" style="margin-left:-5px;border-radius:0 6px 6px 0;">
                    <a href="javascript:void(0);" @click="switchFifth" :style="{'color':fifth?'#fff':'#000'}" style="text-decoration:none;">编程题</a>
                </span>
            </div>
        </div>
        <div style="width:1340px;height:1px;background-color:#d8dadb;margin-top:56px;"></div>
        <div style="margin-left:130px;margin-top:20px;">
            <div style="font-size:12px;float:left;">题目</div>
            <div style="float:left;margin-left:50px;">
               <div style="width:742px;height:30px;background-color:#eff2ff;"></div>
               <div>
                   <el-input
                           type="textarea"
                           :rows="4"
                           placeholder="请输入内容"
                           v-model="subject_name">
                   </el-input>
               </div>
            </div>
        </div>
        <div style="width:1210px;height:1px;background-color:#d8dadb;margin-top:155px;margin-left:130px;"></div>
        <div v-if="first||second">
            <div style="margin-left:130px;margin-top:20px;">
                <div style="font-size:12px;float:left;">选项</div>
                <div style="float:left;margin-left:50px;">
                    <div style="width:742px;height:30px;background-color:#eff2ff;"></div>
                    <div>
                        <el-input
                                type="textarea"
                                :rows="4"
                                placeholder="请输入内容"
                                v-model="choiceQuestion.questionList[0]">
                        </el-input>
                    </div>
                </div>
                <div style="float:left;margin-left:15px;">
                    <el-checkbox-group v-model="choiceQuestion.answerList" v-if="second">
                        <el-checkbox  :label="1" >正确答案</el-checkbox>
                    </el-checkbox-group>
                    <el-radio-group v-model="choiceQuestion.answer" v-if="first">
                        <el-radio :label="1">正确答案</el-radio>
                    </el-radio-group>
                </div>
                <div style="float:left;margin-left:15px;">
                    <a href="javascript:void(0);" @click="deleteChoice(index+1)" style="color:red;text-decoration:none;">
                        <i class="el-icon-delete" style="color:red;"></i>
                        删除
                    </a>
                </div>
            </div>
            <div v-for="(item,index) in choiceQuestion.questionList" style="margin-left:130px;padding-top:135px;" v-if="index>0">
                <div style="float:left;margin-left:75px;">
                    <div style="width:742px;height:30px;background-color:#eff2ff;"></div>
                    <div>
                        <el-input
                                type="textarea"
                                :rows="4"
                                placeholder="请输入内容"
                                v-model="choiceQuestion.questionList[index]">
                        </el-input>
                    </div>
                </div>
                <div style="float:left;margin-left:15px;">
                    <el-checkbox-group v-model="choiceQuestion.answerList" v-if="second">
                        <el-checkbox  :label="index+1" >正确答案</el-checkbox>
                    </el-checkbox-group>
                    <el-radio-group v-model="choiceQuestion.answer" v-if="first">
                        <el-radio :label="index+1">正确答案</el-radio>
                    </el-radio-group>
                </div>
                <div style="float:left;margin-left:15px;">
                    <a href="javascript:void(0);" @click="deleteChoice(index+1)" style="color:red;text-decoration:none;">
                        <i class="el-icon-delete" style="color:red;"></i>
                        删除
                    </a>
                </div>
            </div>
            <div style="margin-left:200px;padding-top:165px;font-size:12px;">
                <a href="javascript:void(0);" @click="addChoice" style="color:#5272ff;text-decoration:none;">
                    <i class="el-icon-circle-plus"></i>
                    增加选项
                </a>
            </div>
            <div style="width:1210px;height:1px;background-color:#d8dadb;margin-top:30px;margin-left:130px;"></div>
            <div style="margin-left:130px;margin-top:30px;font-size:12px;">
                <span style="float:left;">难度</span>
                <span style="float:left;margin-left:40px;"><el-rate v-model="question_color"></el-rate></span>
                <span style="float:left;margin-left:50px;">默认分值</span>
                <span style="float:left;margin-left:30px;margin-top:-5px;">
                    <el-input v-model="question_score" style="width:80px;" size="small"></el-input>&nbsp;分
                </span>
                <span style="float:left;margin-left:50px;">备注</span>
                <span style="float:left;margin-left:30px;margin-top:-5px;">
                    <el-input v-model="question_remarks" style="width:160px;" size="small"></el-input>
                </span>
            </div>
        </div>
        <div v-if="third">
            <div style="margin-left:130px;margin-top:20px;">
                <span style="font-size:12px;">选项</span>
                <span style="margin-left:45px;">
                    <el-input v-model="judgeQuestion.judgeInput1" style="width:745px;" size="small"></el-input>
                </span>
                <span style="margin-left:15px;">
                    <el-radio v-model="judgeQuestion.judgeRadio" :label="1">正确答案</el-radio>
                </span>
            </div>
            <div style="margin-left:160px;margin-top:20px;">
                <span style="margin-left:45px;">
                    <el-input v-model="judgeQuestion.judgeInput2" style="width:745px;" size="small"></el-input>
                </span>
                <span style="margin-left:15px;">
                    <el-radio v-model="judgeQuestion.judgeRadio" :label="2">正确答案</el-radio>
                </span>
            </div>
            <div style="width:1210px;height:1px;background-color:#d8dadb;margin-top:35px;margin-left:130px;"></div>
            <div style="margin-left:130px;margin-top:30px;font-size:12px;">
                <span style="float:left;">难度</span>
                <span style="float:left;margin-left:40px;"><el-rate v-model="question_color"></el-rate></span>
                <span style="float:left;margin-left:50px;">默认分值</span>
                <span style="float:left;margin-left:30px;margin-top:-5px;">
                    <el-input v-model="question_score" style="width:80px;" size="small"></el-input>&nbsp;分
                </span>
                <span style="float:left;margin-left:50px;">备注</span>
                <span style="float:left;margin-left:30px;margin-top:-5px;">
                    <el-input v-model="question_remarks" style="width:160px;" size="small"></el-input>
                </span>
            </div>
        </div>
        <div v-if="fourth">
            <div style="margin-left:130px;margin-top:20px;font-size:12px;">
                <span>答案</span>
                <span style="margin-left:40px;">如果有多个空需要填写,则通过逗号进行分隔</span>
            </div>
            <div style="margin-left:200px;margin-top:20px;">
                <el-input
                        type="textarea"
                        :rows="3"
                        placeholder="请按规则输入填空题答案"
                        v-model="completionQuestion.answer"
                style="width:750px;">
                </el-input>
            </div>
            <div style="width:1210px;height:1px;background-color:#d8dadb;margin-top:35px;margin-left:130px;"></div>
            <div style="margin-left:130px;margin-top:30px;font-size:12px;">
                <span style="float:left;">难度</span>
                <span style="float:left;margin-left:40px;"><el-rate v-model="question_color"></el-rate></span>
                <span style="float:left;margin-left:50px;">默认分值</span>
                <span style="float:left;margin-left:30px;margin-top:-5px;">
                    <el-input v-model="question_score" style="width:80px;" size="small"></el-input>&nbsp;分
                </span>
                <span style="float:left;margin-left:50px;">备注</span>
                <span style="float:left;margin-left:30px;margin-top:-5px;">
                    <el-input v-model="question_remarks" style="width:160px;" size="small"></el-input>
                </span>
            </div>
        </div>
    </div>
    <div style="margin-left:600px;margin-top:30px;height:70px;">
        <span>
            <el-button type="primary" plain style="width:120px;" size="small">继续添加下一题</el-button>
        </span>
        <span style="margin-left:5px;">
            <el-button type="primary" style="width:120px;" size="small" @click="submitSubject">完成</el-button>
        </span>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data:{
            first: true,
            second: false,
            third: false,
            fourth: false,
            fifth: false,
            subject_name: '',
            question_color: '',
            question_score: '',
            question_remarks: '',
            choiceQuestion:{
                questionList:['','',''],
                answerList:[],
                answer:''
            },
            height:820,
            exam_id: '',
            judgeQuestion:{
                judgeInput1: '是',
                judgeInput2: '否',
                judgeRadio: '1'
            },
            completionQuestion:{
                answer: ''
            },
            question_id: '',
            typeQuestion: ''
        },
        created(){
            this.getExamId();
        },
        methods:{
            handleClick(tab, event) {
                console.log(tab, event);
            },
            switchFirst(){
                this.second=this.third=this.fourth=this.fifth=!(this.first=true);
            },
            switchSecond(){
                this.first=this.third=this.fourth=this.fifth=!(this.second=true);
            },
            switchThird(){
                this.first=this.second=this.fourth=this.fifth=!(this.third=true);
            },
            switchFourth(){
                this.first=this.second=this.third=this.fifth=!(this.fourth=true);
            },
            switchFifth(){
                this.first=this.second=this.third=this.fourth=!(this.fifth=true);
            },
            addChoice(){
                if(this.choiceQuestion.questionList.length===7){
                    this.$message({
                        message: '最多创建7个选项',
                        type: 'warning'
                    });
                }else{
                    this.choiceQuestion.questionList.push('');
                    this.height+=132;
                }
            },
            deleteChoice(index){
                if(this.choiceQuestion.questionList.length===3){
                    this.$message({
                        message: '选择题最少需要三个选项',
                        type: 'warning'
                    });
                }else{
                    this.height-=132;
                    this.choiceQuestion.questionList.splice(this.choiceQuestion.questionList.indexOf(index),1);
                    let i=this.choiceQuestion.answerList.indexOf(index);
                    if(i!=-1){
                        this.choiceQuestion.answerList.splice(i,1);
                    }
                    console.log(i);
                    console.log(this.choiceQuestion.answerList);
                }
            },
            submitSubject(){
                if(this.first||this.second){
                    this.addChoiceQuestion();
                }else if(this.third){
                    this.addJudgeQuestion();
                }else if(this.fourth){
                    this.addCompletionQuestion();
                }
            },
            async addChoiceQuestion(){
                let params=new FormData();
                params.append("question_id",this.question_id===undefined?"":this.question_id);
                params.append("exam_id",this.exam_id);
                params.append("choice_question_name",this.subject_name);
                params.append("question_options",this.choiceQuestion.questionList);
                if(this.first){
                    params.append("choice_question_answer",this.choiceQuestion.questionList[this.choiceQuestion.answer]);
                }else{
                    let answer='';
                    for(let i=0;i<this.choiceQuestion.answerList.length;i++){
                        answer+=this.choiceQuestion.questionList[this.choiceQuestion.answerList[i]-1];
                        if(i<this.choiceQuestion.answerList.length-1){
                            answer+=' ';
                        }
                    }
                    params.append("choice_question_answer",answer);
                }
                params.append("choice_question_difficult",this.question_color);
                params.append("choice_question_score",this.question_score);
                params.append("choice_question_remarks",this.question_remarks);
                let result=await axios({
                    method: 'post',
                    url: '/addChoiceQuestion',
                    data: params,
                });
                this.jsonUtils(result.data);
            },
            async addCompletionQuestion(){
                let params=new FormData();
                params.append("question_id",this.question_id===undefined?"":this.question_id);
                params.append("exam_id",this.exam_id);
                params.append("completion_question_name",this.subject_name);
                params.append("completion_question_answer",this.completionQuestion.answer);
                params.append("completion_question_difficult",this.question_color);
                params.append("completion_question_score",this.question_score);
                params.append("completion_question_remarks",this.question_remarks);
                let result=await axios({
                    method: 'post',
                    url: '/addCompletionQuestion',
                    data: params,
                });
                this.jsonUtils(result.data);
            },
            async addJudgeQuestion(){
                let params=new FormData();
                params.append("question_id",this.question_id===undefined?"":this.question_id);
                params.append("exam_id",this.exam_id);
                params.append("judge_question_name",this.subject_name);
                params.append("judge_question_option_false",this.judgeQuestion.judgeInput2);
                params.append("judge_question_option_true",this.judgeQuestion.judgeInput1);
                if(this.judgeQuestion.judgeRadio==='1'){
                    params.append("judge_question_answer",this.judgeQuestion.judgeInput1);
                }else{
                    params.append("judge_question_answer",this.judgeQuestion.judgeInput2);
                }
                params.append("judge_question_score",this.question_score);
                params.append("judge_question_difficult",this.question_color);
                params.append("judge_question_remarks",this.question_remarks);
                let result=await axios({
                    method: 'post',
                    url: '/addJudgeQuestion',
                    data: params,
                });
                this.jsonUtils(result.data);
            },
            jsonUtils(value){
                if(value===1){
                    window.location.href=document.referrer;
                }else{
                    this.$message({
                        message: '服务器繁忙,请稍后',
                        type: 'warning'
                    });
                }
            },
            getExamId(){
                let url=window.location.href.split("/");
                if(url[url.length-1].length>16){
                    let str=url[url.length-1].split("#");
                    this.exam_id=str[0];
                    this.question_id=str[1];
                    this.typeQuestion=str[2];
                    this.modifyQuestion(this.question_id,this.typeQuestion)
                }
                this.exam_id=url[url.length-1];
            },
            async modifyQuestion(question_id,typeQuestion) {
                let result = await axios.get('/getOneQuestion?question_id='+question_id+"&typeQuestion=" + typeQuestion);
                console.log(result.data);
                if (typeQuestion === '1') {
                    this.modifyChoiceQuestion(result.data);
                } else if (typeQuestion === '2') {
                    this.modifyJudgeQuestion(result.data);
                } else if (typeQuestion === '3') {
                   this.modifyCompletionQuestion(result.data);
                }
            },
            modifyChoiceQuestion(question){
                this.subject_name=question.choice_question_name;
                this.question_color=question.choice_question_difficult;
                this.question_score=question.choice_question_score;
                this.question_remarks=question.choice_question_remarks;
                this.choiceQuestion.questionList[0]=question.choice_question_option_A;
                this.choiceQuestion.questionList[1]=question.choice_question_option_B;
                this.choiceQuestion.questionList[2]=question.choice_question_option_C;
                if(question.choice_question_option_D!=null){
                    this.choiceQuestion.answerList.push(question.choice_question_option_D);
                }
                if(question.choice_question_option_E!=null){
                    this.choiceQuestion.answerList.push(question.choice_question_option_E);
                }
                if(question.choice_question_option_F!=null){
                    this.choiceQuestion.answerList.push(question.choice_question_option_F);
                }
                if(question.choice_question_option_G!=null){
                    this.choiceQuestion.answerList.push(question.choice_question_option_G)
                }
                if(question.choice_question_answer.split(" ").length===1){
                    this.switchFirst();
                    this.choiceQuestion.answer=this.choiceQuestion.questionList.indexOf(question.choice_question_answer);
                }else{
                    this.switchSecond();
                    let arr=question.choice_question_answer.split(" ");
                    for(let i=0;i<arr.length;i++){
                        this.choiceQuestion.answerList.push(this.choiceQuestion.questionList.indexOf(arr[i])+1);
                    }
                }
            },
            modifyJudgeQuestion(question){
                this.subject_name=question.judge_question_name;
                this.question_color=question.judge_question_difficult;
                this.question_score=question.judge_question_score;
                this.question_remarks=question.judge_question_remarks;
                this.judgeQuestion.judgeInput1=question.judge_question_option_true;
                this.judgeQuestion.judgeInput2=question.judge_question_option_false;
                this.judgeQuestion.judgeRadio=question.judge_question_option_true===question.judge_question_answer?'1':'2'
                this.switchThird();
            },
            modifyCompletionQuestion(question){
                this.subject_name=question.completion_question_name;
                this.question_color=question.completion_question_difficult;
                this.question_score=question.completion_question_score;
                this.question_remarks=question.completion_question_remarks;
                this.completionQuestion.answer=question.completion_question_answer;
                this.switchFourth();
            }
        }
    })
</script>
</body>
</html>